<template>
  <div class="container">
    <div class="content">
      <el-avatar :size="150" class="avatar"></el-avatar>
      <div class="text-row">
        <span class="hello-text">你好, 洛一!</span>
      </div>
      <button @click="goToUserInfo" class="btn">
        <i class="el-icon-user"></i> 查看您的信息
      </button>

      <div class="button-wrapper">
        <div class="dirtext">管理您的旅行地点</div>
        <router-link :to="{ name: 'AddLocation' }" class="btn">
          <i class="el-icon-plus"></i> 新建地点
        </router-link>
        <button @click="viewMyPlaces" class="btn">
          <i class="el-icon-location"></i> 我的地点
        </button>
      </div>

      <div class="search-bar">
        <el-input
          v-model="searchQuery"
          placeholder="搜索地点名"
          clearable
          @clear="clearSearch"
          @input="searchPlaces"
        />
      </div>

      <div class="place-list">
        <el-card class="box-card" v-for=" place in filteredPlaces" :key="place.placeId">
            <template v-slot:header>
              <div class="clearfix">
                  个人信息
              </div>
              </template>
            <div class="place-card">
              <div class="place-header">
                <h3>{{ place.placeName }}</h3>
              </div>
              <div class="place-details">
                <p>Date: {{ formatDate(place.visitTime) }}</p>
              </div>
              <div class="place-footer">
                <span>记录环游心情</span>
              </div>
            </div>
            <div class="button-group">
              <el-button class="btn look" @click="goToPlaceDetail(place.placeId)" size="small">查看</el-button>
              <el-button class="btn delete" @click="deletePlace(place.placeId)" size="small">删除</el-button>
              <el-button class="btn gene" @click="createJournal(place.placeId)" size="small">生成手账</el-button>
            </div>
          </el-card>
          </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      searchQuery: '',
      places: []
    };
  },
  computed: {
    filteredPlaces() {
      if (this.searchQuery.trim() === '') {
        return this.places; 
      }
        console.log("Filtered places:", this.places);
        return this.places.filter(place =>
        place.placeName.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  created() {
    this.fetchPlaces();
    console.log("Get places:",this.places)
  },
  methods: {
    fetchPlaces() {
      this.$store.dispatch('fetchPlaces').then(() => {
        this.places = this.$store.state.places;
      }).catch(error => {
        console.error('Error while fetching places:', error);
      });
    },
    formatDate(value) {
    if (!value) return '';
    return value.split('T')[0];
    },
    goToPlaceDetail(placeId) {
      this.$router.push({ name: 'PlaceDetail', params: { placeId } });
    },
    deletePlace(placeId) {
      this.$store.dispatch('deletePlace',placeId);
      this.fetchPlaces();
    },
    // 纯纯抽象 其它的就能够删除，但是第一个地点删除不了
    viewMyPlaces() {
      this.fetchPlaces();
    },
    clearSearch() {
      this.searchQuery = '';
      this.fetchPlaces();
    },
    createJournal(placeId) {
  // 确保这里传递的路由名称与定义的路由名称匹配
  this.$router.push({ name: 'CreateJournal', params: { placeId } });
},
    goToUserInfo(){
      this.$router.push({name:'UserInfo'})
    },
  }
};
</script>

<style>
 @import "@/assets/css/location.css";
</style>
